<template>
  <div class="apt-table">
    <Form :wrapper-col="{ span: 14 }" class="pb15">
      <Row :gutter="[24, 24]">
        <Col :span="10">
          <FormItem label="项目名称" :wrapperCol="{span:17,offset:1  }">
            <Input
                v-model:value="queryParam.prjName"
                placeholder="请输入项目名称"
            />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="承接单位" :wrapperCol="{span:16,offset:1  }">
            <Input
                v-model:value="queryParam.doCorp"
                placeholder="请输入承接单位名称"
            />
          </FormItem>
        </Col>
        <Col :span="6" class="text-right">
          <Button type="primary" ghost @click="handleReset">重置</Button>
          <Button type="primary" @click="handleSearch">立即查询</Button>
        </Col>
      </Row>
    </Form>
    <div class="tbr-border">
      <Table
          :dataSource="dataSource"
          :columns="columns"
          :loading="loading"
          :pagination="pagination"
          :rowKey="(dataSource,index) => index"
          @change="handleTableChange"
      >
        <template #num="{ index }">
        <span>{{
            (pagination.current - 1) * pagination.pageSize +
            parseInt(index) + 1
          }}</span>
        </template>
        <template #detail="{ record }">
          <span class="blue pointer" @click="openDetail(record)">查看</span>
        </template>
        <template #date="{ text }">
          {{ parseTime(parseInt(text)) }}
        </template>
      </Table>
    </div>
  </div>

  <Modal v-model:visible="visible" title="详细内容" :width="800" :footer="null" :centered="true">
    <Descriptions :column="2" bordered>
      <DescriptionsItem :span="2" label="工程名称">{{ recordDetail.gcName }}</DescriptionsItem>
      <DescriptionsItem label="工程类型">{{ recordDetail?.gcProjectType }}</DescriptionsItem>
      <DescriptionsItem label="所属区市">{{ recordDetail?.region }}</DescriptionsItem>
      <DescriptionsItem label="工程地址">{{ recordDetail?.gcAddress }}</DescriptionsItem>
      <DescriptionsItem label="委托单位">{{ recordDetail?.gcEntrustUnit }}</DescriptionsItem>
      <DescriptionsItem label="承接单位">{{ recordDetail?.compName }}</DescriptionsItem>
      <DescriptionsItem label="合同签订日期">{{ parseTime( recordDetail?.gcContractDate ) }}</DescriptionsItem>
      <DescriptionsItem label="业务主要内容">{{ recordDetail?.gcEntrustContent }}</DescriptionsItem>
    </Descriptions>
  </Modal>
</template>

<script lang="ts" >
import { Row, Col, Form, Input, Button, Table , Select ,Modal, Descriptions} from "ant-design-vue";
import { defineComponent, ref, onMounted, reactive } from "vue";
import { getforeignZjList} from '/@/api/public';
import { parseTime } from '/@/utils';

interface queryConfig {

  doCorp: string;
  prjName: string;
  prjType: string;
  regDate: string;
  region: string;
  current: number;
  size: number;
}

interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}


export default defineComponent({
  components: {
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Input,
    Button,
    Table,
    Select,
    Option: Select.Option,
    Modal , Descriptions,
    DescriptionsItem:Descriptions.Item
  },
  setup() {
    const visible = ref<boolean>(false);
    const dataSource = ref<unknown[]>([]);
    const recordDetail = ref<any>();
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })


    const loading = ref<boolean>(true);
    let queryParam = reactive<queryConfig>({
      doCorp: "",
      prjName:'',
      prjType:'',
      regDate:'',
      region:'',
      current: 1,
      size: 10
    })

    const tabChange = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getforeignZjList(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }

    const openDetail = data =>{
      recordDetail.value = data
      visible.value = true;
    }

    const handleSearch = async () => {
      paginationRef.value.current =  1;
      queryParam.current = 1;
      await getTableList();
    }

    const handleReset = () => {
      paginationRef.value.current =  1;
      Object.assign(queryParam,{
        prjName: "",
        doCorp: "",
        current:1
      })
      getTableList();
    }

    onMounted(() => {
      getTableList();
    });

    const columns = [
      {
        title: "序号",
        width:80,
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: "工程名称",
        dataIndex: "gcName"
      },
      {
        title: "工程类型",
        dataIndex: "gcProjectType",
      },
      {
        title: "承接单位",
        dataIndex: "compName"
      },

      {
        title: "登记日期",
        dataIndex: "gcContractDate",
        width: 110,
        slots: { customRender: 'date' }
      },
      {
        title: "操作",
        dataIndex: "compId",
        width: 80,
        slots: { customRender: 'detail' }
      }
    ]

    return {
      queryParam, dataSource, columns, loading, pagination: paginationRef ,openDetail,visible,
      parseTime, tabChange, getTableList, handleSearch, handleReset, handleTableChange,recordDetail
    };

  },
});
</script>

<style lang="less" scoped>

.apt-table{
  padding: 5px 15px 15px;

  .title2{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E3EA;

    span{
      padding-left: 10px;
      line-height: 1;
      border-left: 4px solid #0078FF;
    }
  }
}

::v-deep(.ant-table){
  .ant-table-body {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }

  .ant-table-placeholder {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-left-bar{
    width: 100%;
  }
}

</style>


